<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        label="主治医生"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select
          v-decorator="['paymentUser', { rules: [{required: true, message: '主治医生必须填写'}] }]">
          <a-select-option value="1">Jock</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="病人姓名"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['name', { initialValue: 'Alex', rules: [{required: true, message: '病人名称必须核对'}] }]"/>
      </a-form-item>
      <a-form-item
        label="手术时间"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-date-picker @change="onChange" />
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
    <a-divider />
    <div class="step-form-style-desc">
      <h3>说明</h3>
      <p>手术（shǒu shù）指医生用医疗器械对病人身体进行的切除、缝合等治疗。
        以刀、剪、针等器械在人体局部进行的操作，来维持患者的健康。是外科的主要治疗方法，俗称“开刀”。
        目的是医治或诊断疾病，如去除病变组织、修复损伤、移植器官、改善机体的功能和形态等。
        早期手术仅限于用简单的手工方法，在体表进行切、割、缝，如脓肿引流、肿物切除、外伤缝合等。
        故手术是一种破坏组织完整性（切开），或使完整性受到破坏的组织复原（缝合）的操作。随着外科学的发展，手术领域不断扩大，已能在人体任何部位进行。
        应用的器械也不断更新，如手术刀即有电刀、微波刀、超声波刀及激光刀等多种。因之手术也有更广泛的含义。
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Step1',
  data () {
    return {
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this)
    }
  },
  methods: {
    nextStep () {
      const { form: { validateFields } } = this
      // 先校验，通过表单校验后，才进入下一步
      validateFields((err, values) => {
        if (!err) {
          this.$emit('nextStep')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .step-form-style-desc {
    padding: 0 56px;
    color: rgba(0,0,0,.45);

    h3 {
      margin: 0 0 12px;
      color: rgba(0,0,0,.45);
      font-size: 16px;
      line-height: 32px;
    }

    h4 {
      margin: 0 0 4px;
      color: rgba(0,0,0,.45);
      font-size: 14px;
      line-height: 22px;
    }

    p {
      margin-top: 0;
      margin-bottom: 12px;
      line-height: 22px;
    }
  }
</style>
